@model GamesPlayModel
@{
    ViewBag.Title = "HooIzDat: Playing Game";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Header {
    @if (Model.Game.StartedOn.HasValue) {
        <div class="time">
            <p>Game started at @Model.Game.StartedOn.Value</p>
        </div>
    }
    
    @if (!Model.Game.IsFinished) {
        using (Html.BeginForm("Cancel", "Games")) {
            <div>
                <p>
                    <input type="hidden" name="id" value="@Model.Game.GameID" />
                    <input type="submit" value="Cancel Game" />
                </p>
            </div>
        }
    }
}

<h2>Play Game</h2>

@if (Model.Game.IsPending) {
    <div class="dialog">
        <div class="inner">
            <div class="header">
                <h3>Please Wait...</h3>
            </div>
            <div class="body">
                <p class="info">Waiting for another player to join this game...</p>
            </div>
            <div class="actions">
                @Ajax.ActionLink("Refresh", "Play",
                    new { id = Model.Game.GameID, ajaxClientState = Model.AjaxClientState },
                    new AjaxOptions { OnSuccess = "AjaxReload" },
                    new { id = "waitingRefreshLink", @class = "button" })
            </div>
        </div>
    </div>
}
else {

    var showingPopup = Model.Game.IsFinished ||
        (!Model.IsPlayersTurn && Model.Game.IsWaitingForAnswer) ||
        (Model.IsPlayersTurn && Model.Game.IsWaitingForNextTurn && Model.Game.GameState.GuessedCharacter != null);
    
    <div id="tiles" class="@(showingPopup ? "black-out" : "x")">
        <h3>Tiles</h3>
        @Html.Partial("_Tiles")
    </div>
    
    <div id="actionBar">
        <img class="logo" src="@Url.Content("~/Content/HooIzDat-logo-small.png")" alt="Hoo Iz Dat?" />
        
        @Html.Partial("_CurrentPlayers", Model)
        
        <div id="myCharacter">
            <h3>Your Person</h3>
            <div class="tile">
                <div class="inner">
                    <img src="@Url.Content(Model.PlayerCharacter.Image)" alt="@Model.PlayerCharacter.Name" title="Your Person" />
                    <p class="name">@Model.PlayerCharacter.Name</p>
                </div>
            </div>
        </div>
        
        <div class="action-panel">
            <div class="inner">
                <h3>Action Panel</h3>
                <div class="body">
                    @if (!Model.IsPlayersTurn && Model.Game.IsWaitingForQuestion) {
                    <p class="info">Waiting for other player to ask a question or guess...
                        @Ajax.ActionLink("refresh", "Play", new { id = Model.Game.GameID, ajaxClientState = Model.AjaxClientState },
                                        new AjaxOptions { OnSuccess = "AjaxReload" },
                                        new { id = "waitingRefreshLink" })</p>
                    }
                    else if (!Model.IsPlayersTurn && Model.Game.IsWaitingForAnswer) {
                        using (Html.BeginForm("AnswerQuestion", "Games", new { id = Model.Game.GameID })) {
                            <div class="dialog answer-required">
                                <div class="inner">
                                    <div class="header"><h3>Answer Requried</h3></div>
                                    <div class="body">
                                        <p class="question"><strong>@Model.Game.GameState.QuestionAsked</strong></p>
                                        <div class="my-character">
                                            <div class="inner">
                                                <h4>Your Character</h4>
                                                <div class="body">
                                                    <div class="tile">
                                                        <div class="inner">
                                                            <img src="@Url.Content(Model.PlayerCharacter.Image)" alt="@Model.PlayerCharacter.Name" title="Your Character" />
                                                            <p class="name">@Model.PlayerCharacter.Name</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="actions">
                                        <input type="submit" name="answer" value="Yes" />
                                        <input type="submit" name="answer" value="No" />
                                    </div>
                                    <div class="question-mark"></div>
                                </div>
                            </div>
                        }
                    }
                    else if (!Model.IsPlayersTurn && Model.Game.IsWaitingForNextTurn) {
                        <div class="info">
                            @if (Model.Game.GameState.GuessedCharacterID != null) {
                                <p>Other player wrongly guessed <strong>@Model.Game.GameState.GuessedCharacter.Name</strong>.</p>
                            }
                            <p>Waiting for other player to finish their turn...
                            @Ajax.ActionLink("refresh", "Play", new { id = Model.Game.GameID, ajaxClientState = Model.AjaxClientState },
                                                new AjaxOptions { OnSuccess = "AjaxReload" },
                                                new { id = "waitingRefreshLink" })</p>
                        </div>
                    }
                    else if (Model.IsPlayersTurn && Model.Game.IsWaitingForAnswer) {
                        <p class="info">Waiting for an answer to "@Model.Game.GameState.QuestionAsked"...
                        @Ajax.ActionLink("refresh", "Play", new { id = Model.Game.GameID, ajaxClientState = Model.AjaxClientState },
                                            new AjaxOptions { OnSuccess = "AjaxReload" },
                                            new { id = "waitingRefreshLink" })</p>
                    }
                    else if (Model.IsPlayersTurn && Model.Game.IsWaitingForNextTurn) {
                        if (Model.Game.GameState.GuessedCharacterID == null) {
                            <div class="answered">
                                <p class="answer">Answer to "@Model.Game.GameState.QuestionAsked":
                                    <strong class="@(Model.Game.GameState.Answer.Value ? "yes" : "no")">@(Model.Game.GameState.Answer.Value ? "Yes" : "No")</strong>
                                </p>
                                @using (Html.BeginForm("FinishTurn", "Games", new { id = Model.Game.GameID })) {
                                    <div>
                                        <input type="submit" value="Finish Turn" />
                                    </div>
                                }
                                <p class="info">Knock down tiles by clicking on them then click Finish Turn</p>
                            </div>
                        }
                        else {
                            <div class="dialog wrong-guess">
                                <div class="inner">
                                    <div class="header"><h3>Wrong Guess</h3></div>
                                    @using (Html.BeginForm("FinishTurn", "Games", new { id = Model.Game.GameID })) {
                                        <div class="body">
                                            <p>Other player's person<br /> is not @Model.Game.GameState.GuessedCharacter.Name</p>
                                            <div class="wrong-character">
                                                <div class="inner">
                                                    <h4>Guessed Person</h4>
                                                    <div class="body">
                                                        <div class="tile">
                                                            <div class="inner">
                                                                <img src="@Url.Content(Model.Game.GameState.GuessedCharacter.Image)" alt="@Model.Game.GameState.GuessedCharacter.Name" title="Guessed Person" />
                                                                <p class="name">@Model.Game.GameState.GuessedCharacter.Name</p>
                                                            </div>
                                                        </div>
                                                        <div class="cross"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="actions">
                                            <input type="submit" value="Finish Turn" />
                                        </div>
                                    }
                                </div>
                            </div>
                        }
                    }
                    else if (Model.IsPlayersTurn && Model.Game.IsWaitingForQuestion) {  
                        using (Html.BeginForm("AskQuestion", "Games", new { id = Model.Game.GameID })) {
                            <div>
                                <p>
                                    <label for="question">Question:</label>
                                    @Html.DropDownList("question", Model.Questions, new { accesskey = "Q" })
                                    <input type="submit" value="Ask" />
                                </p>
                            </div>
                        }
                        <p class="info">Select a question to ask; or click a tile to make a guess</p>
                    }
                    else if (Model.Game.IsFinished && Model.Game.Winner == Model.Player) {
                        <div class="dialog winner">
                            <div class="inner">
                                <div class="header"><h3>You Won!</h3></div>
                                @using (Html.BeginForm("FinishGame", "Games", new { id = Model.Game.GameID })) {
                                    <div class="body">
                                        <p>Other player's person is<br />@Model.OtherPlayerCharacter.Name</p>
                                        <p>You won in @Model.Game.QuestionsWonIn questions!</p>
                                        <div class="character">
                                            <div class="inner">
                                                <h4>Other Player's Person</h4>
                                                <div class="body">
                                                    <div class="tile">
                                                        <div class="inner">
                                                            <img src="@Url.Content(Model.OtherPlayerCharacter.Image)" alt="@Model.OtherPlayerCharacter.Name" title="Other Player's Person" />
                                                            <p class="name">@Model.OtherPlayerCharacter.Name</p>
                                                        </div>
                                                    </div>
                                                    <div class="cross"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="actions">
                                        <input type="submit" value="Finish Game" />
                                    </div>
                                }
                            </div>
                        </div>
                    }
                    else if (Model.Game.IsFinished && Model.Game.Winner != Model.Player) {
                        <div class="dialog loser">
                            <div class="inner">
                                <div class="header"><h3>You Lost!</h3></div>
                                    @using (Html.BeginForm("FinishGame", "Games", new { id = Model.Game.GameID })) {
                                        <div class="body">
                                            <p>Other player correctly guessed<br />@Model.PlayerCharacter.Name</p>
                                            <p>Other player's person is @Model.OtherPlayerCharacter.Name</p>
                                            <div class="character">
                                                <div class="inner">
                                                    <h4>Other Player's Person</h4>
                                                    <div class="body">
                                                        <div class="tile">
                                                            <div class="inner">
                                                                <img src="@Url.Content(Model.OtherPlayerCharacter.Image)" alt="@Model.OtherPlayerCharacter.Name" title="Other Player's Person" />
                                                                <p class="name">@Model.OtherPlayerCharacter.Name</p>
                                                            </div>
                                                        </div>
                                                        <div class="cross"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="actions">
                                            <input type="submit" value="Finish Game" />
                                        </div>
                                    }
                            </div>
                        </div>
                    }
                    </div>
            </div>
        </div>
    </div> @* END: actionBar *@
    
} @*closing brace of: if (Model.IsPending)*@